<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #map {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <h1 id="grade">游戏得分：0</h1>
    <div id="map"></div>
    <script type="module">

        import Game from './js/Game.js';

        let el = document.querySelector('#map');
        let game = new Game(el, 10);

        // 添加自定义得分事件
        game.toGrade = function (grade){
            document.querySelector('#grade').innerHTML = grade;
        }

        game.on('changeGrade', (grade) => {
            console.log(`您的当前游戏得分是：${grade}`);
        });

        // 添加自定义游戏结束事件
        game.toOver = function (overState) {
            if(overState){
                alert('恭喜您取得胜利！');
            }else{
                alert('game over!');
            }
        }

        // 添加自定义控制器
        // game.addControl(function () {
        //     window.addEventListener('keydown', ({keyCode}) => {
        //         console.log(keyCode);
        //         switch (keyCode) {
        //             case 87:
        //                 this.snake.changeDirection('top');
        //                 break;
        //             case 65:
        //                 this.snake.changeDirection('left');
        //                 break;
        //             case 88:
        //                 this.snake.changeDirection('bottom');
        //                 break;
        //             case 68:
        //                 this.snake.changeDirection('right');
        //                 break;
        //             default:
        //                 break;
        //         }
        //     });
        // });

        // 游戏开始事件
        document.onclick = function () {
            game.start();
        }

    </script>
</body>

</html>